<template>
    <div style="width: 100%; height: 100%">
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px"
        >
            <el-breadcrumb-item :to="{ path: '/expertTemplate' }">
                <i class="el-icon-tickets"></i>
                诊断模板
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div
            class="add-board main-container"
            style="background: #ffffff; overflow: hidden"
        >
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="机构模板" name="first">
                    <el-row>
                        <el-col :span="13">
                            <div :style="'width:' + leftPercent + '%'">
                                <el-row>
                                    <el-input
                                        placeholder="输入关键字进行过滤"
                                        size="mini"
                                        style="margin-bottom: 30px; width: 80%"
                                        v-model="institutionFilterText"
                                    >
                                    </el-input>
                                    <el-button
                                        size="mini"
                                        @click="institutionFilter"
                                    >
                                        过滤
                                    </el-button>
                                </el-row>
                                <el-row>
                                    <div class="tree">
                                        <el-tree
                                            @node-click="nodeClick"
                                            v-loading="orgLoading"
                                            :data="firstLevelTempOrg"
                                            :default-expanded-keys="
                                                orgExpandNode
                                            "
                                            node-key="id"
                                            :lazy="lazyif"
                                            accordion
                                            :load="orgLoadTemplate"
                                            :props="defaultProps"
                                            :expand-on-click-node="true"
                                        >
                                            <span
                                                slot-scope="{ node }"
                                                class="custome-tree"
                                            >
                                                <span
                                                    class="custome-tree-message"
                                                >
                                                    {{ node.label }}</span
                                                >
                                                <span v-if="node.level === 1">
                                                    <el-button
                                                        size="mini"
                                                        type="text"
                                                        class="btnRight"
                                                        @click="copyNode(node)"
                                                        >复制</el-button
                                                    >
                                                </span>
                                            </span>
                                        </el-tree>
                                    </div>
                                </el-row>
                            </div>
                        </el-col>
                        <div
                            class="app"
                            @mousedown="move"
                            style="position: absolute"
                        ></div>
                        <el-col :span="10" style="float: right">
                            <div
                                :style="'width:' + rightPercent + '%'"
                                style="float: right"
                            >
                                <div v-if="orgInputVisible">
                                    <el-row
                                        style="margin-bottom: 10px; width: 100%"
                                        class="content-text needfloat"
                                    >
                                        <el-col
                                            :span="3"
                                            style="margin-top: 4px"
                                            >镜下所见:
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <div>
                                            <el-input
                                                class="input-bar"
                                                type="textarea"
                                                :readonly="true"
                                                :autosize="{
                                                    minRows: 10,
                                                    maxRows: 10,
                                                }"
                                                placeholder="模板内容"
                                                v-model="textarea"
                                            >
                                            </el-input>
                                        </div>
                                    </el-row>
                                </div>
                                <el-row
                                    style="margin-bottom: 10px; width: 100%"
                                    class="content-text needfloat"
                                    v-if="!orgInputVisible"
                                >
                                    <el-col :span="3" style="margin-top: 4px"
                                        >分组名称:
                                    </el-col>
                                </el-row>
                                <el-row
                                    style="margin-bottom: 10px; width: 100%"
                                    class="content-text needfloat"
                                    v-if="orgInputVisible"
                                >
                                    <el-col :span="3" style="margin-top: 4px"
                                        >节点名称:
                                    </el-col>
                                </el-row>
                                <el-row style="width: 100%" class="needfloat">
                                    <div>
                                        <el-input
                                            v-if="orgInputVisible"
                                            class="input-bar"
                                            type="textarea"
                                            :readonly="true"
                                            :autosize="{
                                                minRows: 10,
                                                maxRows: 10,
                                            }"
                                            placeholder="模板内容"
                                            v-model="textarealabel"
                                        >
                                        </el-input>
                                        <el-input
                                            v-if="!orgInputVisible"
                                            class="input-bar"
                                            :readonly="true"
                                            placeholder="模板内容"
                                            v-model="textarealabel"
                                        >
                                        </el-input>
                                    </div>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="我的模板" name="second">
                    <el-row>
                        <el-col :span="13">
                            <div :style="'width:' + leftPercent2 + '%'">
                                <el-row style="margin-bottom: 30px">
                                    <el-input
                                        placeholder="输入关键字进行过滤"
                                        size="mini"
                                        style="width: 80%"
                                        v-model="personfilterText"
                                    >
                                    </el-input>
                                    <el-button
                                        size="mini"
                                        @click="personfilter"
                                    >
                                        过滤
                                    </el-button>
                                </el-row>
                                <el-row>
                                    <el-form
                                        :inline="true"
                                        :model="addRootForm"
                                        class="add-root-form-inline"
                                        :style="'width:' + leftPercent2 + '%'"
                                    >
                                        <el-form-item label="根节点">
                                            <el-input
                                                v-model="addRootForm.rootNode"
                                                size="mini"
                                                placeholder="请输入根节点"
                                            ></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button
                                                type="primary"
                                                size="mini"
                                                @click="addRootNode"
                                                >添加
                                            </el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-row>
                                <el-row>
                                    <div class="tree" v-loading="personLoading">
                                        <el-tree
                                            @node-click="personNodeClick"
                                            :data="firstLevelTempPerson"
                                            node-key="id"
                                            :lazy="personlazyif"
                                            accordion
                                            :default-expanded-keys="
                                                expandNodePerson
                                            "
                                            :load="personLoadTemplate"
                                            :props="defaultProps"
                                            :expand-on-click-node="true"
                                        >
                                            <span
                                                slot-scope="{ node, data }"
                                                class="custome-tree"
                                            >
                                                <span
                                                    v-if="
                                                        !ifchange ||
                                                        !(data.id === changeid)
                                                    "
                                                    class="custome-tree-message"
                                                    style="margin-right: 140px"
                                                >
                                                    {{ node.label }}</span
                                                >
                                                <el-button
                                                    v-if="!(node.level === 3)"
                                                    type="text"
                                                    size="mini"
                                                    @click.stop="
                                                        appendNode(node, data)
                                                    "
                                                >
                                                    添加子节点
                                                </el-button>
                                                <el-button
                                                    type="text"
                                                    size="mini"
                                                    @click.stop="
                                                        removeNodes(node, data)
                                                    "
                                                >
                                                    <font
                                                        color="red"
                                                        class="btnRight"
                                                        >删除节点</font
                                                    >
                                                </el-button>
                                            </span>
                                        </el-tree>
                                    </div>
                                </el-row>
                            </div>
                        </el-col>
                        <div
                            class="app"
                            @mousedown="move2"
                            style="position: absolute"
                        ></div>
                        <el-col :span="10" style="float: right">
                            <div
                                :style="'width:' + rightPercent2 + '%'"
                                style="float: right"
                            >
                                <el-form
                                    :model="threeInstitutionEditForm"
                                    :rules="rulesEdit"
                                    ref="threeInstitutionEdit"
                                >
                                    <el-row
                                        style="margin-bottom: 10px; width: 100%"
                                        class="content-text needfloat"
                                        v-if="!personInputVisible"
                                    >
                                        <el-col
                                            :span="3"
                                            style="margin-top: 4px"
                                            >分组名称:
                                        </el-col>
                                    </el-row>
                                    <div>
                                        <el-row
                                            style="
                                                margin-bottom: 10px;
                                                width: 100%;
                                            "
                                            class="content-text needfloat"
                                            v-if="personInputVisible"
                                        >
                                            <el-col
                                                :span="3"
                                                style="margin-top: 4px"
                                                >节点名称:
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <div>
                                                <el-form-item
                                                    prop="persontextarealabel"
                                                >
                                                    <el-input
                                                        v-if="
                                                            personInputVisible
                                                        "
                                                        class="input-bar"
                                                        type="textarea"
                                                        :autosize="{
                                                            minRows: 10,
                                                            maxRows: 10,
                                                        }"
                                                        :readonly="false"
                                                        placeholder="节点名称"
                                                        v-model="
                                                            threeInstitutionEditForm.persontextarealabel
                                                        "
                                                    >
                                                    </el-input>
                                                </el-form-item>
                                                <el-input
                                                    v-if="!personInputVisible"
                                                    class="input-bar"
                                                    placeholder="分组名称"
                                                    v-model="
                                                        threeInstitutionEditForm.persontextarealabel
                                                    "
                                                >
                                                </el-input>
                                            </div>
                                        </el-row>
                                    </div>
                                    <div
                                        v-if="personInputVisible"
                                        style="margin-top: 12px"
                                    >
                                        <el-row
                                            style="
                                                margin-bottom: 10px;
                                                width: 100%;
                                            "
                                            class="content-text needfloat"
                                        >
                                            <el-col
                                                :span="3"
                                                style="margin-top: 4px"
                                                >镜下所见:
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-form-item prop="persontextarea">
                                                <el-input
                                                    class="input-bar"
                                                    type="textarea"
                                                    :autosize="{
                                                        minRows: 10,
                                                        maxRows: 10,
                                                    }"
                                                    :readonly="false"
                                                    placeholder="镜下所见"
                                                    v-model="
                                                        threeInstitutionEditForm.persontextarea
                                                    "
                                                >
                                                </el-input>
                                            </el-form-item>
                                        </el-row>
                                    </div>
                                </el-form>
                                <el-row>
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="rewriteText"
                                        v-if="diagnoseLookInputVisible"
                                        style="float: right; margin-top: 5px"
                                        >保存
                                    </el-button>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog
            :close-on-click-modal="false"
            title="新增诊断信息"
            :visible.sync="appendDialogVisible"
            width="30%"
        >
            <el-row>
                <el-form
                    label-width="80px"
                    :model="threeInstitutionForm"
                    :rules="rules"
                    ref="threeInstitution"
                >
                    <el-form-item
                        label="节点名称:"
                        style="margin-top: 5px"
                        size="mini"
                        prop="AddThreeInstitutionLabel"
                    >
                        <el-input
                            v-model="
                                threeInstitutionForm.AddThreeInstitutionLabel
                            "
                            type="textarea"
                            :autosize="{ minRows: 8, maxRows: 10 }"
                            placeholder="请三级节点名称"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="镜下所见:"
                        size="mini"
                        prop="AddThreeDiagnoseLook"
                    >
                        <el-input
                            v-model="threeInstitutionForm.AddThreeDiagnoseLook"
                            type="textarea"
                            :autosize="{ minRows: 8, maxRows: 10 }"
                            placeholder="请输入病理诊断内容"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="updatealter">取 消</el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="submitForm('third')"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :close-on-click-modal="false"
            title="新增节点"
            :visible.sync="appendDialogVisible1"
            width="30%"
        >
            <el-row>
                <el-form label-width="80px">
                    <el-form-item label="节点名称:" size="mini">
                        <el-input
                            v-model="AddTwoInstitutionLabel"
                            placeholder="请输入二级节点名称"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="updatealter">取 消</el-button>
                <el-button size="mini" type="primary" @click="submitForm()"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { vxRule } from '../../libs/validator';

export default {
    name: 'MyGroupDiagnosisTemplates',
    data() {
        return {
            threeInstitutionForm: {
                AddThreeInstitutionLabel: '',
                AddThreeDiagnoseLook: '',
            },
            threeInstitutionEditForm: {
                persontextarea: '',
                persontextarealabel: '',
            },
            AddTwoInstitutionLabel: '',
            positionX: 0,
            positionY: 0,
            leftPercent: 95,
            rightPercent: 100,
            positionX2: 0,
            positionY2: 0,
            leftPercent2: 95,
            rightPercent2: 100,
            nodeName: '',
            ifchange: false,
            changeid: 0,
            nodeinfo: 0,
            institutionFilterText: '',
            personfilterText: '',
            textarea: '',
            textarealabel: '',
            persontextareaNode: {},
            lazyif: true,
            personlazyif: true,
            activeName: 'second',
            firstLevelTempOrg: [],
            firstLevelTempPerson: [],
            expandNodePerson: [],
            personLoading: false,
            orgLoading: false,
            orgExpandNode: [],
            defaultProps: {
                children: 'children',
                label: 'nodeName',
                isLeaf: 'isLeaf',
            },
            orgInputVisible: false,
            personInputVisible: false,
            appendDialogVisible: false,
            appendDialogVisible1: false,
            diagnoseLookInputVisible: false,
            addRootForm: {
                rootNode: '',
            },
            rules: {
                AddThreeInstitutionLabel: [
                    vxRule(true, null, 'blur', '请填写节点名称'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '节点名称填写请不要超过500个字符',
                        null,
                        500
                    ),
                ],
                AddThreeDiagnoseLook: [
                    vxRule(false, null, 'blur', '请填写镜下所见'),
                    vxRule(
                        false,
                        'length',
                        'blur',
                        '镜下所见填写请不要超过2048个字符',
                        null,
                        2048
                    ),
                ],
            },
            rulesEdit: {
                persontextarealabel: [
                    vxRule(true, null, 'blur', '请填写节点名称'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '节点名称填写请不要超过500个字符',
                        null,
                        500
                    ),
                ],
                persontextarea: [
                    vxRule(false, null, 'blur', '请填写镜下所见'),
                    vxRule(
                        false,
                        'length',
                        'blur',
                        '镜下所见填写请不要超过2048个字符',
                        null,
                        2048
                    ),
                ],
            },
        };
    },
    mounted() {
        this.institutiontemplate(0, null);
        this.institutiontemplatePerson(1, null);
    },
    computed: {},
    methods: {
        handleClick(tab) {
            if (tab.label === '机构模板') {
                this.institutiontemplate(0, null);
                this.institutionFilterText = '';
            }
            if (tab.label === '我的模板') {
                this.institutiontemplatePerson(1, null);
                this.personfilterText = '';
            }
        },
        institutionFilter() {
            if (this.institutionFilterText === '') {
                this.orgExpandNode = [];
                this.institutiontemplate(0, null);
            } else {
                this.orgLoading = true;
                try {
                    this.$axios({
                        method: 'get',
                        url: '/PROXY-Remote/diagnose-templates',
                        params: {
                            type: 0,
                            key: this.institutionFilterText,
                        },
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.firstLevelTempOrg = [];
                            this.orgExpandNode = [];
                            res.data.data.forEach((element) => {
                                this.firstLevelTempOrg.push(element);
                            });
                            if (res.data.data.length > 0) {
                                if (res.data.data[0].children) {
                                    if (res.data.data[0].children.length > 0) {
                                        if (
                                            res.data.data[0].children[0]
                                                .children
                                        ) {
                                            this.orgExpandNode.push(
                                                res.data.data[0].children[0].id
                                            );
                                        } else {
                                            this.orgExpandNode.push(
                                                res.data.data[0].id
                                            );
                                        }
                                    } else {
                                        this.orgExpandNode.push(
                                            res.data.data[0].id
                                        );
                                    }
                                }
                            }
                        }
                        this.orgLoading = false;
                    });
                } catch (e) {
                    this.$message.error('请求失败');
                    this.orgLoading = false;
                }
            }
        },
        personfilter() {
            if (this.personfilterText === '') {
                this.expandNodePerson = [];
                this.institutiontemplatePerson(1, null);
            } else {
                this.orgLoading = true;
                try {
                    this.$axios({
                        method: 'get',
                        url: '/PROXY-Remote/diagnose-templates',
                        params: {
                            type: 1,
                            key: this.personfilterText,
                        },
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.firstLevelTempPerson = [];
                            this.expandNodePerson = [];
                            res.data.data.forEach((element) => {
                                this.firstLevelTempPerson.push(element);
                            });
                            if (res.data.data.length > 0) {
                                if (res.data.data[0].children) {
                                    if (res.data.data[0].children.length > 0) {
                                        if (
                                            res.data.data[0].children[0]
                                                .children
                                        ) {
                                            this.expandNodePerson.push(
                                                res.data.data[0].children[0].id
                                            );
                                        } else {
                                            this.expandNodePerson.push(
                                                res.data.data[0].id
                                            );
                                        }
                                    } else {
                                        this.expandNodePerson.push(
                                            res.data.data[0].id
                                        );
                                    }
                                }
                            }
                        }
                        this.orgLoading = false;
                    });
                } catch (e) {
                    this.$message.error('请求失败');
                    this.orgLoading = false;
                }
            }
        },
        // 根据父id获取数据
        orgLoadTemplate(node, resolve) {
            if (!node.data.id) {
                resolve([]);
            } else if (this.institutionFilterText === '') {
                try {
                    this.$axios({
                        method: 'get',
                        url: `/PROXY-Remote/diagnose-templates/${node.data.id.toString()}`,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            resolve(res.data.data);
                        }
                    });
                } catch (e) {
                    console.log('请求失败');
                }
            } else {
                if (node.level >= 3) return resolve([]);
                if (node.data.parentId === 0) {
                    // 展开根节点
                    this.firstLevelTempOrg.forEach((rootNode) => {
                        if (rootNode.id === node.data.id) {
                            const results = rootNode.children;
                            resolve(results);
                        }
                    });
                } else {
                    // 展开二级节点
                    this.firstLevelTempOrg.forEach((rootNode) => {
                        if (rootNode.children) {
                            rootNode.children.forEach((secondLevel) => {
                                if (secondLevel.id === node.data.id) {
                                    const results = secondLevel.children;
                                    resolve(results);
                                }
                            });
                        }
                    });
                }
            }
            return null;
        },
        personLoadTemplate(node, resolve) {
            if (!node.data.id) {
                resolve([]);
            } else if (this.personfilterText === '') {
                try {
                    this.$axios({
                        method: 'get',
                        url: `/PROXY-Remote/diagnose-templates/${node.data.id.toString()}`,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            resolve(res.data.data);
                        }
                    });
                } catch (e) {
                    console.log('请求失败');
                }
            } else {
                if (node.level >= 3) return resolve([]);
                if (node.data.parentId === 0) {
                    // 展开根节点
                    this.firstLevelTempPerson.forEach((rootNode) => {
                        if (rootNode.id === node.data.id) {
                            const results = rootNode.children;
                            resolve(results);
                        }
                    });
                } else {
                    // 展开二级节点
                    this.firstLevelTempPerson.forEach((rootNode) => {
                        if (rootNode.children) {
                            rootNode.children.forEach((secondLevel) => {
                                if (secondLevel.id === node.data.id) {
                                    const results = secondLevel.children;
                                    resolve(results);
                                }
                            });
                        }
                    });
                }
            }
            return null;
        },
        nodeClick(data) {
            this.orgInputVisible = !!data.isLeaf;
            this.textarea = data.diagnoseLook ? data.diagnoseLook : '';
            this.textarealabel = data.nodeName ? data.nodeName : '';
        },
        personNodeClick(data, node) {
            if (data.isLeaf) {
                this.personInputVisible = true;
                this.nodeinfo = data.id;
            } else {
                this.personInputVisible = false;
                this.nodeinfo = data.id;
            }
            this.diagnoseLookInputVisible = true;
            this.threeInstitutionEditForm.persontextarea = data.diagnoseLook
                ? data.diagnoseLook
                : '';
            this.threeInstitutionEditForm.persontextarealabel = data.nodeName
                ? data.nodeName
                : '';
            this.persontextareaNode = node;
        },
        // 获取机构全部跟节点数据
        institutiontemplate(type, key) {
            this.orgLoading = true;
            let param = {};
            if (key) {
                param = {
                    type,
                    key,
                };
            } else {
                param = { type };
            }
            try {
                this.$axios({
                    method: 'get',
                    url: '/PROXY-Remote/diagnose-templates',
                    params: param,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.firstLevelTempOrg = [];
                        res.data.data.forEach((element) => {
                            this.firstLevelTempOrg.push({
                                nodeName: element.nodeName,
                                id: element.id,
                                isLeaf: element.isLeaf,
                                children: [],
                                isFirst: true,
                            });
                        });
                    }
                    this.orgLoading = false;
                });
            } catch (e) {
                this.$message.error('请求失败');
                this.orgLoading = false;
            }
        },

        // 获取个人全部跟节点数据
        institutiontemplatePerson(type, key) {
            this.orgLoading = true;
            let param = {};
            if (key) {
                param = {
                    type,
                    key,
                };
            } else {
                param = { type };
            }
            try {
                this.$axios({
                    method: 'get',
                    url: '/PROXY-Remote/diagnose-templates',
                    params: param,
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this.firstLevelTempPerson = [];
                        res.data.data.forEach((element) => {
                            this.firstLevelTempPerson.push({
                                nodeName: element.nodeName,
                                id: element.id,
                                isLeaf: element.isLeaf,
                                children: [],
                            });
                        });
                    }
                    this.orgLoading = false;
                });
            } catch (e) {
                this.$message.error('请求失败');
                this.orgLoading = false;
            }
        },
        move(e) {
            const odiv = e.target; // 获取目标元素
            // 计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
            const x = e.clientX - odiv.offsetLeft;
            console.log(odiv.offsetLeft, odiv.offsetTop);
            document.onmousemove = (E) => {
                // 获取拖拽元素的位置
                let left = E.clientX - x;
                let top = 0;
                this.positionX = left;
                this.positionY = top;
                this.positionY = 0;
                // console.log(document.documentElement.clientHeight,odiv.offsetHeight)
                // 把拖拽元素 放到 当前的位置
                if (left <= 0) {
                    left = 0;
                } else if (
                    left >=
                    document.documentElement.clientWidth - odiv.offsetWidth
                ) {
                    // document.documentElement.clientWidth 屏幕的可视宽度
                    left =
                        document.documentElement.clientWidth - odiv.offsetWidth;
                }

                if (top <= 0) {
                    top = 0;
                } else if (
                    top >=
                    document.documentElement.clientHeight - odiv.offsetHeight
                ) {
                    // document.documentElement.clientHeight 屏幕的可视高度
                    top =
                        document.documentElement.clientHeight -
                        odiv.offsetHeight;
                }
                if (left < 0.245 * document.documentElement.clientWidth) {
                    left = 0.245 * document.documentElement.clientWidth;
                }
                if (left > 0.585 * document.documentElement.clientWidth) {
                    left = 0.585 * document.documentElement.clientWidth;
                }
                odiv.style.left = `${left}px`;
                odiv.style.top = `${top}px`;
                // eslint-disable-next-line max-len
                this.leftPercent =
                    (this.positionX * 100) /
                    ((document.documentElement.clientWidth * 13) / 24);
                if (
                    this.positionX <
                    0.5 * document.documentElement.clientWidth
                ) {
                    // eslint-disable-next-line max-len
                    this.rightPercent =
                        ((document.documentElement.clientWidth -
                            this.positionX) *
                            100) /
                        ((document.documentElement.clientWidth * 13) / 24);
                } else if (
                    this.positionX <
                    0.7 * document.documentElement.clientWidth
                ) {
                    // eslint-disable-next-line max-len
                    this.rightPercent =
                        (0.85 *
                            ((document.documentElement.clientWidth -
                                this.positionX) *
                                100)) /
                        ((document.documentElement.clientWidth * 13) / 24);
                } else {
                    // eslint-disable-next-line max-len
                    this.rightPercent =
                        (0.2 *
                            ((document.documentElement.clientWidth -
                                this.positionX) *
                                100)) /
                        ((document.documentElement.clientWidth * 13) / 24);
                }
                if (this.leftPercent < 45) {
                    this.leftPercent = 45;
                } else if (this.leftPercent > 110) {
                    this.leftPercent = 110;
                }
                if (this.rightPercent < 65) {
                    this.rightPercent = 65;
                } else if (this.rightPercent > 140) {
                    this.rightPercent = 140;
                }
            };
            // 为了防止 火狐浏览器 拖拽阴影问题
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        move2(e) {
            const odiv = e.target; // 获取目标元素E

            // 计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
            const x = e.clientX - odiv.offsetLeft;
            console.log(odiv.offsetLeft, odiv.offsetTop);
            document.onmousemove = (E) => {
                // 获取拖拽元素的位置
                let left = E.clientX - x;
                let top = 0;
                this.positionX2 = left;
                this.positionY2 = top;
                this.positionY2 = 0;
                // console.log(document.documentElement.clientHeight,odiv.offsetHeight)
                // 把拖拽元素 放到 当前的位置
                if (left <= 0) {
                    left = 0;
                } else if (
                    left >=
                    document.documentElement.clientWidth - odiv.offsetWidth
                ) {
                    // document.documentElement.clientWidth 屏幕的可视宽度
                    left =
                        document.documentElement.clientWidth - odiv.offsetWidth;
                }

                if (top <= 0) {
                    top = 0;
                } else if (
                    top >=
                    document.documentElement.clientHeight - odiv.offsetHeight
                ) {
                    // document.documentElement.clientHeight 屏幕的可视高度
                    top =
                        document.documentElement.clientHeight -
                        odiv.offsetHeight;
                }
                // eslint-disable-next-line max-len
                if (left < 0.245 * document.documentElement.clientWidth) {
                    left = 0.245 * document.documentElement.clientWidth;
                }
                // eslint-disable-next-line max-len
                if (left > 0.585 * document.documentElement.clientWidth) {
                    left = 0.585 * document.documentElement.clientWidth;
                }
                odiv.style.left = `${left}px`;
                odiv.style.top = `${top}px`;
                // eslint-disable-next-line max-len
                this.leftPercent2 =
                    (this.positionX2 * 100) /
                    ((document.documentElement.clientWidth * 13) / 24);
                if (
                    this.positionX2 <
                    0.5 * document.documentElement.clientWidth
                ) {
                    // eslint-disable-next-line max-len
                    this.rightPercent2 =
                        ((document.documentElement.clientWidth -
                            this.positionX2) *
                            100) /
                        ((document.documentElement.clientWidth * 13) / 24);
                } else if (
                    this.positionX2 <
                    0.7 * document.documentElement.clientWidth
                ) {
                    // eslint-disable-next-line max-len
                    this.rightPercent2 =
                        (0.85 *
                            (document.documentElement.clientWidth -
                                this.positionX2) *
                            100) /
                        ((document.documentElement.clientWidth * 13) / 24);
                } else {
                    // eslint-disable-next-line max-len
                    this.rightPercent2 =
                        (0.2 *
                            (document.documentElement.clientWidth -
                                this.positionX2) *
                            100) /
                        ((document.documentElement.clientWidth * 13) / 24);
                }
                if (this.leftPercent2 < 45) {
                    this.leftPercent2 = 45;
                } else if (this.leftPercent2 > 110) {
                    this.leftPercent2 = 110;
                }
                if (this.rightPercent2 < 65) {
                    this.rightPercent2 = 65;
                } else if (this.rightPercent2 > 140) {
                    this.rightPercent2 = 140;
                }
            };
            // 为了防止 火狐浏览器 拖拽阴影问题
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        addRootNode() {
            if (this.addRootForm.rootNode !== '') {
                const filter = {
                    diagnoseLook: '',
                    institutionId: this.$store.state.institution.id,
                    isPersonal: 1,
                    nodeName: this.addRootForm.rootNode,
                    parentId: 0,
                    remark: '备注信息',
                };
                this.addNode(filter);
            } else {
                this.$message({
                    type: 'info',
                    message: '请输入名称',
                });
            }
        },
        // 加节点
        addNode(filter) {
            try {
                this.$axios({
                    method: 'post',
                    url: '/PROXY-Remote/diagnose-templates',
                    data: filter,
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.info('新增成功');
                            this.institutiontemplatePerson(1, null);
                            this.AddTwoInstitutionLabel = '';
                            this.threeInstitutionForm = {
                                AddThreeInstitutionLabel: '',
                                AddThreeDiagnoseLook: '',
                            };
                        } else {
                            this.$message.warning(res.data.message);
                        }
                    },
                    (err) => {
                        this.$message.error(
                            `新增失败  ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        // 提交表单之后更新数据弹窗
        updatealter() {
            this.AddTwoInstitutionLabel = '';
            this.threeInstitutionForm = {
                AddThreeInstitutionLabel: '',
                AddThreeDiagnoseLook: '',
            };
            this.appendDialogVisible = false;
            this.appendDialogVisible1 = false;
        },
        submitForm(node = null) {
            if (!!node && node === 'third') {
                if (!this.validateForm()) {
                    return;
                }
            }
            this.addGroup();
            this.appendDialogVisible = false;
            this.appendDialogVisible1 = false;
        },
        // 新增数据
        addGroup() {
            // 处理isLeaf属性
            if (this.persontextareaNode.level === 1) {
                const filter = {
                    diagnoseLook: '',
                    institutionId: this.$store.state.institution.id,
                    isPersonal: 1,
                    nodeName: this.AddTwoInstitutionLabel,
                    parentId: this.persontextareaNode.data.id,
                    remark: '',
                };
                this.addNode(filter);
            } else if (this.persontextareaNode.level === 2) {
                const filter = {
                    diagnoseLook:
                        this.threeInstitutionForm.AddThreeDiagnoseLook,
                    institutionId: this.$store.state.institution.id,
                    isPersonal: 1,
                    nodeName:
                        this.threeInstitutionForm.AddThreeInstitutionLabel,
                    // todo等待后台修改
                    parentId: this.persontextareaNode.data.id,
                    remark: '',
                };
                this.addNode(filter);
            }
        },
        // 树新增节点
        appendNode(node) {
            this.persontextareaNode = node;
            if (node.level === 1) {
                this.appendDialogVisible1 = true;
            } else if (node.level === 2) {
                this.appendDialogVisible = true;
            }
        },
        // 树删除节点
        removeNodes(node) {
            const msg = '确定要删除当前节点及其子节点吗？';
            this.$confirm(msg, '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    try {
                        this.$axios({
                            method: 'delete',
                            url: `/PROXY-Remote/diagnose-templates/${node.data.id}`,
                            data: {},
                        }).then(
                            (res) => {
                                if (res && res.data.code === 200) {
                                    this.$message.info('删除成功');
                                    this.institutiontemplatePerson(1, null);
                                } else {
                                    this.$message.info(res.data.message);
                                }
                            },
                            (err) => {
                                this.$message.info(
                                    `删除失败  ${err.response.data.message}`
                                );
                            }
                        );
                    } catch (e) {
                        console.log('请求失败');
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消操作',
                    });
                });
        },
        copyNode(node) {
            try {
                this.$axios({
                    method: 'post',
                    url: `/PROXY-Remote/diagnose-templates/copy?id=${node.data.id}`,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.info('复制成功');
                        }
                    },
                    (err) => {
                        this.$message.info(
                            `复制失败  ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        rewriteText() {
            if (!this.validateThreeInstitutionEditForm()) {
                return;
            }
            let filter = {};
            if (this.persontextareaNode.level === 1) {
                filter = {
                    diagnoseLook: '',
                    isPersonal: 1,
                    nodeName: this.threeInstitutionEditForm.persontextarealabel,
                    id: this.persontextareaNode.data.id,
                    parentId: 0,
                    remark: '',
                };
            } else {
                filter = {
                    diagnoseLook: this.threeInstitutionEditForm.persontextarea,
                    isPersonal: 1,
                    nodeName: this.threeInstitutionEditForm.persontextarealabel,
                    id: this.persontextareaNode.data.id,
                    parentId: this.persontextareaNode.data.parentId,
                    remark: this.persontextareaNode.data.remark,
                };
            }
            this.updateNode(filter);
        },

        // 更新节点
        updateNode(filter) {
            try {
                this.$axios({
                    method: 'put',
                    url: '/PROXY-Remote/diagnose-templates',
                    data: filter,
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('修改成功');
                            this.institutiontemplatePerson(1, null);
                        } else {
                            this.$message.warning(res.data.message);
                        }
                    },
                    (err) => {
                        this.$message.error(
                            `修改失败  ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        validateForm() {
            let decide = false;
            this.$refs.threeInstitution.validate((valid) => {
                if (valid) {
                    decide = true;
                }
            });
            return decide;
        },
        validateThreeInstitutionEditForm() {
            let decide = false;
            this.$refs.threeInstitutionEdit.validate((valid) => {
                if (valid) {
                    decide = true;
                }
            });
            return decide;
        },
    },
};
</script>

<style scoped>
.custome-tree {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custome-tree-message {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.custome-tree .btnRight {
    margin-right: 10px;
}

.el-tree {
    min-width: 100%;
    display: inline-block;
}

.tree {
    overflow-y: scroll;
    overflow-x: auto;
    height: 512px;
}

.app {
    position: relative; /*定位*/
    top: 10px;
    /* left: calc(53% - 0px); */
    left: calc(54% - 0px);
    width: 3px;
    height: 600px;
    background: #e4e7ed; /*设置一下背景*/
    z-index: 100;
}

.needfloat {
    float: right;
}
</style>
